import React, { Component } from 'react'
import styled from 'styled-components'
import { rgba, darken } from 'polished';
import { Icon } from 'antd';

const WrapperBox = styled.span`
  position: relative;
  height: 40px;
  display: inline-block;
  background: ${props => rgba(props.color, 0.2)};
  border: 1px solid ${props => darken(0.2, rgba(props.color, 0.2))};
  border-radius: 20px;
  text-align: center;
  font-weight: 400;
  font-size: 16px;
  line-height: 40px;
  padding: 0 20px 0 50px;
  color: rgba(0, 0, 0, .95);
  ::before {
    content: '${props => props.content}';
    position: absolute;
    left: 0px;
    width: 40px;
    height: 40px;
    color: ${props => !isNaN(props.content) ? '#fff' : 'transparent'};
    text-shadow: 0 0 0 #fff;
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    background: ${props => props.color};
    border-radius: 50%;
  }
`

const Content = styled.section`
  padding: ${props => props.type === 'small' ? '10px' : (props.type === 'none' ? '0px' : '20px 40px')};
  background: #fff;
  height: calc(100% - 20px);
  border-radius: 0 0 4px 4px;
`

interface Props {
  title?: string;
  step: number | string;
  ChildComponent?: Function;
  color?: string;
  type?: string
}

class Step extends Component<Props>{

  readonly state = {
    flag: true,
  }

  handleClick = () => {
    this.setState({
      flag: !this.state.flag
    })
  }

  render() {
    const { title, step = 1, ChildComponent, color = '#0880DF', type } = this.props;

    return (
      <>
        <div style={{ display: 'flex' }}>
          <WrapperBox content={step.toString()} color={color}>{title || ''}</WrapperBox>
          {
            ChildComponent && (
              <Icon
                style={{ marginTop: 15, marginLeft: 15, color, outline: 'none' }}
                onClick={this.handleClick}
                type={this.state.flag ? "caret-down" : "caret-right"}
              />
            )
          }
        </div>
        <Content type={type}>{this.state.flag && ChildComponent && <ChildComponent />}</Content>
      </>
    )
  }
}
export default Step;
